<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="description" content="Exemplo do plugin para abas implementados Frameworks FED" />
  <meta name="viewport" content="width=1020" />
  <title>Abas</title>

  <link href="css/estilo_geral.css?v=1" rel="stylesheet" />
  <script src="scripts/modernizr-1.7.min.js"></script>
  <!--[if lt IE 9]>
    <script src="scripts/innershiv.min.js"></script>
    <script src="scripts/selectivizr-min.js"></script>
  <![endif]-->

</head>
<body>

<!-- abre .limites -->
<div class="limites">

<!-- abre #topo -->
  <header id="topo">
    topo
  </header>
<!-- fecha #topo -->

<!-- abre #conteudo -->
  <div id="conteudo">


    <!-- abre section.abas -->
    <section class="abas">

      <!-- abre #aba-1 -->
      <details id="aba-1" open>
        <summary><a href="#aba-1" title="Ver aba 1">aba 1</a></summary>
        <aside>
          <h2>Modelos de abas padrão com section e details</h2>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
        </aside>
      </details>
      <!-- fecha #aba-1 -->

      <!-- abre #aba-2 -->
      <details id="aba-2" open>
        <summary><a href="#aba-2" title="Ver aba 2">aba 2</a></summary>
        <aside>
          <p>conteúdo aba 2</p>
          <p>conteúdo aba 2</p>
          <p>conteúdo aba 2</p>
        </aside>
      </details>
      <!-- fecha #aba-1 -->

      <!-- abre #aba-3 -->
      <details id="aba-3" open>
        <summary><a href="#aba-3" title="Ver aba 3">aba 3</a></summary>
        <aside>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
        </aside>
      </details>
      <!-- fecha #aba-3 -->
    
    </section>
    <!-- fecha section.abas -->


    <!-- abre ul.abas -->
    <ul class="abas">

      <li id="aba_lista3">
        <h4><a href="#aba_lista3" title="Ver aba 3">aba 3</a></h4>
        <div class="detalhes">
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
          <p>conteúdo aba 3</p>
        </div>
      </li>

      <li id="aba_lista2">
        <h4><a href="#aba_lista2" title="Ver aba 2">aba 2</a></h4>
        <div class="detalhes">
          <p>conteúdo aba 2</p>
          <p>conteúdo aba 2</p>
          <p>conteúdo aba 2</p>
        </div>
      </li>

      <li id="aba_lista1">
        <h4><a href="#aba_lista1" title="Ver aba 1">aba 1</a></h4>
        <div class="detalhes">
          <h2>Abas com lista, "direção" right</h2>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
          <p>conteúdo aba 1</p>
        </div>
      </li>

    </ul>
    <!-- fecha ul.abas -->



  </div>
<!-- fecha #conteudo -->

<!-- abre #rodape -->
  <footer id="rodape">
    rodapé
  </footer>
<!-- fecha #rodape -->

</div>
<!-- fecha .limites -->

<!-- abre scripts finais, visando a melhor performance do site -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="scripts/abas-min.js"></script>
<script src="scripts/funcionalidades.js"></script>
<!-- fecha scripts finais, visando a melhor performance do site -->

</body>
</html>